<template>
	<view
		class="goods-item"
		:class="`goods-item-column${column}`"
		@click="goGoods(goods.id)">
		<view class="goods-item-img">
			<view class="goods-item-img-box">
				<view class="goods-item-img-box-url">
					<lazy-load
						:image="imgUrl(goods.image)"
						loading-img="/static/images/loading.png"
						error-img="/static/images/error.png"
						img-mode="widthFix">
					</lazy-load>
				</view>
			</view>
		</view>
		<view class="goods-item-info">
			<view class="goods-item-name text_line2" v-if="showParams?.productName">{{goods.name}}</view>
			<view class="goods-item-market text_line1" v-if="showParams?.sellingPoint">{{goods.marketTitle}}</view>
			<view class="goods-item-other main-flex">
				<view class="main-flex-item goods-item-other-l main-flex" v-if="showParams?.productPrice">
					<text class="goods-item-price">￥{{moneyStr(goods.sellPrice)}}</text>
					<text class="goods-item-old" v-if="showParams?.linePrice || column == 1">￥{{moneyStr(goods.marketPrice)}}</text>
				</view>
				<view class="goods-item-add" @click.stop="openGoods(goods)" v-if="!showParams?.linePrice || column == 1">
					<uni-icons type="plus-filled" color="#e3230e" size="30"></uni-icons>
				</view>
			</view>
		</view>
	</view>
</template>

<script setup>
  /**
   * GoodsItem 首页商品
   * @description 首页商品
   * @property {Object} goods 商品信息
   * @event {Function} chooseGoods 点击+
   */
	import { computed, onMounted, ref, watch } from "vue"
	import { productInfo } from "@/api/app_api/product"
	import useUserStore from '@/store/modules/user'
	
	const userStore = useUserStore()
	
	const props = defineProps({
		goods: {
			type: Object,
			default: () => {}
		},
		column: {
			type: [Number, String],
			default: 2
		},
		showParams: {
			type: Object,
			default: () => {
				return {
					linePrice: 0,
					productName: 1,
					productPrice: 1,
					productSales: 0,
					sellingPoint: 1
				}
			}
		}
	})
	
	const emits = defineEmits(['chooseGoods'])
	
	const openGoods = (item) => {
		productInfo({
			productId: item.id,
			sellChannel: userStore.sellChannel
		}).then(res => {
			if (res.data) {
				emits('chooseGoods', res.data)
			} else {
				uni.$u.toast('商品失效')
			}
		})
	}
	
	// 商品详情
	const goGoods = (id) => {
		uni.navigateTo({
			url: `/pages/goods/index?id=${id}`
		})
	}
</script>

<style lang="scss" scoped>
  .goods-item {
		width: 100%;
		overflow: hidden;
		background-color: #ffffff;
		border-radius: 10rpx;
		box-shadow: 0 0 8rpx rgba(0, 0, 0, 0.1);
		&-img {
			width: 100%;
			&-box {
				position: relative;
				top: 0;
				left: 0;
				padding-bottom: 100%;
				&-url {
					position: absolute;
					width: 100%;
					height: 100%;
				}
			}
		}
		&-info {
			padding: 12rpx;
		}
		&-name {
			font-size: 24rpx;
			font-weight: 600;
			word-break: break-all;
		}
		&-market {
			font-size: 20rpx;
			color: $text-light;
			margin-top: 10rpx;
		}
		&-other {
			margin-top: 10rpx;
			&-l {
				word-break: break-all;
				align-items: baseline;
				margin-left: 10rpx;
			}
		}
		&-price {
			font-size: 26rpx;
			color: $price-color;
			font-weight: 600;
		}
		&-old {
			font-size: 22rpx;
			color: $text-light;
			text-decoration: line-through;
			margin-left: 10rpx;
		}
		&-unit {
			color: $text-light;
			font-size: 20rpx;
		}
		&-add {
			margin-left: auto;
			line-height: 1;
		}
		&-column1 {
			height: 200rpx;
			display: flex;
			align-items: flex-start;
			.goods-item-img {
				width: 200rpx;
			}
			.goods-item-info {
				height: 100%;
				display: flex;
				flex-direction: column;
				flex: 1;
				overflow: hidden;
				justify-content: space-between;
				box-sizing: border-box;
			}
		}
		&-column2 {
			
		}
		&-column3 {
			.goods-item-price {
				font-size: 20rpx;
			}
			.goods-item-old {
				font-size: 18rpx;
			}
		}
	}
</style>
